<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作业2</title>
    <style>
        .span1 {
            font-size: 22px;
        }

        .span2 {
            color: white;
        }
        .div1 {
            font-size: 18px;
            font-family: "隶书"
        }
    </style>
</head>

<body>

    <img style="position: relative;width:150px; margin-left: 240px;" src="../img/logo.jpg" alt="">
    <div align="center" style="position: relative ;background-color:rgb(234,255,250); padding: 10px;;width: 350px;margin-left: 1310px; margin-top:-50px;">
        <span class="span1" style="position: relative ;">尾品汇</span>
        <span class="span1" style="position: relative ;">当当优品</span>
        <span class="span1" style="position: relative ;">数字馆</span>
        <span class="span1" style="position: relative ;">都看阅读</span>
    </div>
    <img style=" position: absolute ;margin-left:1340px;margin-top:-65px; width:75px;" src="../img/icon_count.png" alt="">

    <div style=" position: absolute ;width:1430px;background-color:rgb(254,105,21);padding: 5px;margin-left: 240px;margin-top:10px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">图书</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">音像</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">童装</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">服装</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">鞋靴</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">运动</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">箱包</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">美妆</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">珠宝</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">家具</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">食品</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">酒</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">手机</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">数码</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">电脑</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="span2">家电</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <img style="margin-top:10px; margin-left: 240px; margin-top:55px; width: 1440px;" src="../img/banner.png" alt="">
    <p style=" position: absolute ;background-color:white; width: 1436px; margin-left:240px; height:555px;border-style: solid;border-color: rgb(207,234,177)">
            <img style="float:left; margin-top:-180px;margin-left: -15px;margin-top:15px;" width="350px" src="../img/bg_bang.gif" alt="">
            <img style="position: absolute;margin-left:-270px; margin-top:80px;" width="40px" src="../img/bookNo1.gif" alt=""> 
            <img style="float:left; margin-top:100px;margin-left: -330px" width="400px" src="../img/book-01.jpg" alt="">
            <div style="position: absolute;margin-left:610px;margin-top:130px;" >
                <div class="div1" style="padding:5px;color:rgb(33, 106, 180);font-size: 22px;">偷影子的人</div>
                <div class="div1" style="padding:5px">作者：[法]马克李维（Marc Levy）著</div>
                <div class="div1" style="padding:5px">出版社：湖南文艺出版社</div>
                <div class="div1" style="padding:5px">当当价：<font style="color:rgb(145,22,81); font-weight: bold">&yen; 17.90</font> </div>
                <div class="div1" style="padding:5px">不知道姓氏的克蕾儿。这就是你在我声明里的角色，</div>
                <div class="div1" style="padding:5px">我童年时的小女孩，今日蜕变成了女人，一段青梅竹</div>
                <div class="div1" style="padding:5px">马的回忆，一个时间之神没有应允的愿望。一个老</div>
                <div class="div1" style="padding:5px">是受班上同学欺负的瘦弱小男孩，因为拥有以重特殊</div>
                <div class="div1" style="padding:5px">能力而强大：他能"偷别人的影子"</div>
            </div>
            
            <img style="position: absolute; width:200px; margin-left: -650px; margin-top: 350px;" src="../img/book-02.jpg" alt="">
            <img style="position: absolute;;margin-left:-630px; margin-top:340px;" width="40px" src="../img/bookNo2.gif" alt="">
            <div style="position: absolute; margin-left:1200px; margin-top:125px;" >
                <div class="div1" style="padding:5px;color:rgb(33, 106, 180);font-size: 22px;">看见（央视知名记者、主持人)柴静：十年个人</div>
                <div class="div1" style="padding:5px">成长的告白，中国社会变迁的备忘</div>
                <div class="div1" style="padding:5px">作者：柴静著</div>
                <div class="div1" style="padding:5px">出版社：广西师范大学出版社</div>
                <div class="div1" style="padding:5px">当当价：<font style="color:rgb(145,22,81); font-weight: bold">&yen; 29.40 </font> <font style="color:rgb(97,166,149);">7.4折</font> </div>
            </div>
            <img style="position: absolute;margin-left:-640px; margin-top:570px; width:180px;" src="../img/book-03.jpg" alt="">
            <img style="position: absolute;margin-left:-630px; margin-top:570px;" width="40px" src="../img/bookNo3.gif" alt="">
            <div style="position: absolute; margin-left:1200px; margin-top:335px;" >
                    <div class="div1" style="padding:5px;color:rgb(33, 106, 180);font-size: 22px;">改变孩子先改变自己</div>
                    <div class="div1" style="padding:5px">作者：贾容韬 贾毅著</div>
                    <div class="div1" style="padding:5px">出版社：作家出版社</div>
                    <div class="div1" style="padding:5px">当当价：<font style="color:rgb(145,22,81); font-weight: bold">&yen; 22.20 </font> <font style="color:rgb(97,166,149);">7.4折</font> </div>
                </div>
            
    </p>
    <img style="position:absolute; margin-left:921px; margin-top:-16px; margin-top:565px;" src="../img/validate.gif" alt="">
    <div align="center" style="position: absolute ;  width:1440px; margin-left:240px; margin-top:580px; ">
        <span   >
            Copyright（C）当当网 2004-2017,All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;
            京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
    </div>
</body>

</html>

<!-- <img style="float:left; margin-top:-180px;margin-left: -170px" src="../img/bg_bang.gif" alt="">
            <img style="float:left; margin-top:0px;margin-left: 0px" src="../img/book-01.jpg" alt="">
            <img style="position: absolute;;margin-left:0px; margin-top:0px;" src="../img/bookNo1.gif" alt="">
            <div style="float:left;margin-left:300px;margin-top:-300px;" >偷影子的人<br>作者：[法]马克李维（Marc Levy）著<br>出版社：湖南文艺出版社<br>当当价：17.90 <br>不知道姓氏的克蕾儿。这就是你在我声明里的角色，<br>我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br>马的回忆，一个时间之神没有应允的愿望。一个老<br>是受班上同学欺负的瘦弱小男孩，因为拥有以重特殊<br>能力而强大：他能"偷别人的影子"</div>
            <img style="position: absolute;;margin-left:700px; margin-top:-310px;" src="../img/bookNo2.gif" alt="">
            <img style="float:left;margin-left:700px;margin-top:-300px;" src="../img/book-02.jpg" alt="">
            <div style="float:left; margin-left:0px; margin-top:0px;" >看见（央视知名记者、主持人)柴静：十年个人<br>成长的告白，中国社会变迁的备忘<br>作者：柴静著<br>出版社：广西师范大学出版社<br>29.40 7.4折<br></div>
            <img style="position: absolute;;margin-left:700px; margin-top:-180px;" src="../img/bookNo3.gif" alt="">
            <img style="float:left; margin-left:700px; margin-top:-180px;" src="../img/book-03.jpg" alt="">
            <div style="float:left; margin-left:800px; margin-top:-180px;">改变孩子先改变自己<br>作者：贾容韬 贾毅著<br>出版社：作家出版社<br>22.20 7.4折</div> -->